import React from 'react';

export class Counter extends React.Component {
  state = { count: 1, number: 1 };

  handleClick = () => {
    // 套用异步模型理解
    // this.setState({
    //   count: this.state.count + 1,
    // });
    // console.log(this.state.count);
    // 举例2 多次调用 setState，修改同一个数据
    // 第一次
    // this.setState({
    //   count: this.state.count + 1,
    // });
    // // 第二次
    // this.setState({
    //   count: this.state.count + 2,
    // });
    // // setState 始终是异步表现
    // console.log(this.state.count); // 1
    // // 组件最后会合并修改并渲染到页面上
    // 举例3 多次调用 setState 修改多个数据
    // this.setState({
    //   count: this.state.count + 1,
    // });

    // this.setState({
    //   number: this.state.number + 1,
    // });

    // console.log(this.state.count); // 1
    // console.log(this.state.number); // 1

    // 举例 4 使用回调函数，updater获取当前修改后最新的值
    // this.setState({
    //   count: 2,
    // });
    // console.log(this.state.count);
    // // 如果想在这里拿到修改后的count做对应处理
    // this.setState((state) => {
    //   console.log(state.count);
    //   return {
    //     count: state.count + 1,
    //   };
    // });

    // 第三次
    // this.setState((state) => {
    //   // 此时拿到的值当前修改可以拿到的最新值：3
    //   console.log(state.count);
    //   return {
    //     // 在3的基础上加1
    //     // 如果没有后续的修改，则 4 更新到页面上
    //     count: state.count + 1,
    //   };
    // });

    // // setState 始终表现是异步的，所以这里还是 初始化时的 count
    // console.log(this.state.count); // 1

    // 举例5，setState的第二个参数，传入回调函数（这个回调函数会在组件渲染完毕后调用）
    // this.setState(
    //   (state) => {
    //     return {
    //       count: state.count + 1,
    //     };
    //   },
    //   () => {
    //     // 这是第二个参数，会在组件渲染完毕后调用
    //     // 和 componentDidUpdate 作用重合了
    //     console.log('组件更新之后1');
    //   }
    // );
    // 情况1
    // this.setState({
    //   count: this.state.count + 1,
    // });
    // // 更新以这次为准，上面的会忽略
    // this.setState({
    //   count: this.state.count + 1,
    // });

    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      });
      this.setState({
        count: this.state.count + 1,
      });
    }, 0);
  };

  componentDidUpdate() {
    console.log('组件更新之后2');
  }

  render() {
    console.log('render');
    return (
      <div>
        <h1>count: {this.state.count}</h1>
        {/* <h1>number: {this.state.number}</h1> */}
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}
